{extend name="main/index" /}
{block name="main"}
    {css href="/static/admin/assets/css/toastr.min.css"}

<div class="content-page">
    <div class="content">
        <div class="row">

            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-header transparent">
                        <h2><strong>Sortable</strong> Table</h2>
                        <div class="additional-btn">
                            <a href="#" class="hidden reload"><i class="icon-ccw-1"></i></a>
                            <a href="#" class="widget-toggle"><i class="icon-down-open-2"></i></a>
                            <a href="#" class="widget-close"><i class="icon-cancel-3"></i></a>
                        </div>
                    </div>
                    <div class="widget-content">
                        <div class="table-responsive">
                            <table data-sortable class="table">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>订单号</th>
                                    <th>入住日期</th>
                                    <th>离开日期</th>
                                    <th>联系人</th>
                                    <th>订单状态</th>
                                    <th>是否支付</th>
                                </tr>
                                </thead>

                                <tbody>
                                {volist name="data" id="v" }
                                <tr>
                                    <td>{$v.id}</td>
                                    <td>{$v.orderNum}</td>
                                    <td>{$v.checkin}</td>
                                    <td>{$v.checkout}</td>
                                    <td>{$v.name}</td>
                                    <td>
                                        <a href="javascript:;" class="change" data-id="{$v.id}">{if $v.status==1}待处理{else/}已处理{/if}</a>
                                    </td>
                                    <td>{if $v.isPay==1}
                                        未支付
                                        {else/}
                                        已支付
                                        {/if}
                                    </td>
                                </tr>
                                {/volist}
                                </tbody>
                            </table>
                            {$data->render()}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{js href="/static/admin/assets/js/jquery.min.js"}

{js href="/static/admin/assets/js/toastr.min.js"}
<script>
    $(function () {
        // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-bottom-left" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

        // 触发修改订单
        $('.change').click(function () {
            var ac_id = $(this).attr('data-id');
            var obj = $(this);
            // console.log(obj);
            changeAjax(ac_id, obj); // 执行AJAX修改
        });
    });

    // 执行AJAX修改
    function changeAjax(id, obj) {
        // console.log(obj);
        $.ajax({
            type: 'delete',
            url: '/deal/' + id,
            dataType: 'json',
            success: function (data) {
                // console.log(data);
                if (data.status) {
                    toastr.success(data.info);
                    // 将该条目修改
                    obj.html("已处理");
                } else {
                    toastr.error(data.info, 'FBI WARING:');
                }
            },
            error: function () {
                alert('AJAX操作失败');
            }
        });
    }

</script>

{/block}